<template>
  <el-container class="main" v-loading="load" element-loading-text="正在加载中" element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- 页面图表 -->
    <el-main class="view">
      <div class="view-container">
        <!-- 组件标题 -->
        <slot name="title">
          <div class="view-name" :style="{height: headerHeight}">{{ name }}</div>
        </slot>
        <!-- 组件容器 -->
        <div class="view-example-wrapper" :style="{height: viewContentHeight}">
          <slot name="view-others"></slot>
          <div class="view-example" :style="{height: containerHeight}">
            <slot name="example"></slot>
          </div>
        </div>
      </div>
    </el-main>
    <!-- 页面配置 -->
    <el-aside class="options" :width="width" v-if="showRight">
      <!-- 页面隐藏 -->
      <el-button
        class="close"
        type="primary"
        :icon="isClose ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
        @click="onClose"
      ></el-button>
      <!-- 页面数据项 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="配置操作" name="first">
          <slot name="form"></slot>
        </el-tab-pane>
        <el-tab-pane label="完整配置" name="second">
          <slot name="options"></slot>
        </el-tab-pane>
        <el-tab-pane label="完整数据" name="third">
          <slot name="data"></slot>
        </el-tab-pane>
      </el-tabs>
    </el-aside>
  </el-container>
</template>

<script>
export default {
  name: "view-main",
  props: {
    name: {
      type: String
    },
    load: {
      type: Boolean
    },
    showRight: {
      type: Boolean,
      default: false
    },
    // 居于 内容区域‘viewContentHeight’ 设置canvas画布区域的大小，默认是 垂直居中的
    containerHeight: {
      type: String,
      default: "50%"
    },
    // 头部大小
    headerHeight: {
      type: String,
      default: "50px"
    }
  },
  data() {
    return {
      // 配置容器默认宽度
      defaultWidth: 400,
      // 配置容器实时宽度
      width: "400px",
      // 配置容器关闭状态
      isClose: false,
      // 配置标签页状态
      activeName: "first"
    };
  },
  computed: {
    // 设置内容区域的大小
    viewContentHeight() {
      return `calc(100% - ${this.headerHeight})`;
    }
  },
  methods: {
    // 开启关闭菜单
    onClose() {
      this.isClose = !this.isClose;
      if (this.isClose) {
        // this.width = '0px'
        this.tween(this.defaultWidth, 0);
      } else {
        // this.width = this.defaultWidth + 'px'
        this.tween(0, this.defaultWidth);
      }
    },
    // 页面配置容器过渡改变宽度
    tween(start, end) {
      var _self = this;
      function animate() {
        if (TWEEN.update()) {
          requestAnimationFrame(animate);
        }
      }
      let position = { tweeningValue: start };
      new TWEEN.Tween(position)
        .to({ tweeningValue: end }, 100)
        .onUpdate(function() {
          _self.width = position.tweeningValue + "px";
        })
        .start();
      animate();
    }
  },
  // 更新之后执行
  updated() {
    this.$emit("close");
  }
};
</script>

<style scoped>
.view,
.options {
  position: relative;
  height: 100%;
}

.view-container {
  position: relative;
  height: 100%;
}

.view-name {
  /* position: absolute; */
  min-width: 150px;
  max-width: 200px;
  height: 50px;
  line-height: 50px;
  margin-left: 40px;
  padding-right: 50px;
  font-size: 20px;
  color: #38baf3;
  border-bottom: 1px solid #38baf3;
}

.view-example-wrapper {
  position: relative;
}

.view-example {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 100%;
  /* width: calc(100% - 40px); */
  height: 50%;
  min-width: 500px;
  min-height: 500px;
}

.options {
  background: #172343;
  /* transition: all 0.3s; */
  border-left: 1px solid rgba(56, 186, 243, 0.3);
  overflow: unset;
}

.close {
  position: absolute;
  top: 0;
  left: -41px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  font-size: 20px;
  color: #38baf3;
  background-color: rgba(56, 186, 243, 0.3);
  border: none;
  border-radius: 5px 0 0 5px;
}

.close:hover {
  text-shadow: 0 0 6px rgba(188, 241, 253, 0.7);
}

.close >>> i {
  display: block;
  height: 100%;
  line-height: inherit;
}

.options >>> .el-tabs {
  height: 100%;
}

.options >>> .el-tabs__nav-wrap::after {
  background-color: transparent;
}

.options >>> .el-tabs__nav {
  float: right;
  padding-right: 20px;
}

.options >>> .el-tabs__item {
  color: #e2e3e5;
}

.options >>> .el-tabs__item:hover,
.options >>> .el-tabs__item.is-active {
  color: #72d0ff;
}

.options >>> .el-form-item__label {
  color: #e2e3e5;
}

.options >>> .el-tabs__content {
  height: calc(100% - 55px);
  overflow: auto;
}

.options >>> .el-form-item__content {
  padding-right: 20px;
  text-align: left;
}

.options >>> pre {
  padding-left: 20px;
  text-align: left;
  color: #adb9c7;
  font-size: 15px;
}
</style>
